<template>
	<view class="active-list-wp">
		<!-- 活动列表信息 -->
		<view class="active-list">
			<view class="img-box">
				<view @click="choosePicImg">
					<view v-if="cropperPic">
						<u-image :src="cropperPic" width="686rpx" height="320rpx" mode="widthFix"></u-image>
					</view>
					<view class="img-top" v-else>
						<img src="https://file.casugn.com/storecompcard//sbr11r9ji8lmd1bbba35f5324c1da5b910e53f3d8ac5_1681285322874.png"
							alt="">
						<text>上传封面图</text>
					</view>
				</view>
			</view>

			<view class="active-title">
				<view class="title-top">
					标题
				</view>
				<u--input placeholder="请输入标题内容" suffixIcon="arrow-right"
					suffixIconStyle="color: #909399;font-size:30rpx" border="none" v-model="title" clearable>
				</u--input>
			</view>
			<view class="active-title" @click="startClick">
				<view class="title-top">
					开始时间
				</view>
				<u--input readonly placeholder="请选择活动开始时间" suffixIcon="arrow-right"
					suffixIconStyle="color: #909399;font-size:30rpx" border="none" v-model="startTime">
				</u--input>
			</view>
			<view class="active-title" @click="endClick">
				<view class="title-top">
					结束时间
				</view>
				<u--input readonly placeholder="请选择活动结束时间" suffixIcon="arrow-right"
					suffixIconStyle="color: #909399;font-size:30rpx" border="none" v-model="endTime">
				</u--input>
			</view>
			<view class="active-title" @click.stop='getLocation'>
				<view class="title-top">
					详细地址
				</view>
				<u--input placeholder="请选择详细地址" suffixIcon="arrow-right" readonly
					suffixIconStyle="color: #909399;font-size:30rpx" border="none" v-model="address">
				</u--input>
			</view>
			<view class="active-title active-invite" @click="toInviteLists">
				<view class="title-top">
					邀请人员
				</view>
				<u--input placeholder="请选择邀请人员" suffixIcon="arrow-right" readonly
					suffixIconStyle="color: #909399;font-size:30rpx" border="none" v-model="member">
				</u--input>
				<view class="ava-box" @click="toInviteLists" v-if="inviteList.length!=0">
					<u-avatar class="ava-item" :src="item.head" shape="circle" size="60"
						v-for="(item,index) in inviteList" :key="index"></u-avatar>
				</view>
			</view>
			<view class="active-title" @click="gotoEditor">
				<view class="title-top">
					内容
				</view>
				<u--input :placeholder="content?'点击预览内容':'请填写完整内容' " suffixIcon="arrow-right" readonly
					suffixIconStyle="color: #909399;font-size:30rpx" border="none">
				</u--input>
			</view>

			<view class="sign-number-list" v-if="editId">
				<view class="sign-title">
					报名人员名单
				</view>
				<scroll-view :scroll-y="true" style="max-height:400rpx;" @scrolltolower="scrolltolower">
					<template v-if="registerList && registerList.length>0">
						<view class="sign-item" v-for="(item,index) in registerList" :key="index">
							<view style="margin-right: 20rpx;">
								<u--image v-if="item.head" :src="item.head" width="60rpx" height="60rpx"></u--image>
								<u--image v-else
									src="https://file.casugn.com/storecompcard/temp/avatar_1682582523631.png"
									width="60rpx" height="60rpx"></u--image>
							</view>
							<view class="sign-item-name u-line-1">{{item.name}}</view>
							<view class="sign-item-phone">{{item.mobile || ""}}</view>
						</view>
					</template>
					<template v-else>
						暂无人员报名,请耐心等待
					</template>
				</scroll-view>
			</view>
		</view>
		<view class="submit-botton">
			<u-button type="primary" color="#276AEE" text="提交活动" :loading="submitLoad" throttleTime="600"
				@click="submitActive()">
			</u-button>
		</view>
		<u-datetime-picker :show="timeShow" v-model="startTimeValue" mode="datetime" @confirm="startTimeConfirm"
			@cancel="startTimeClose" closeOnClickOverlay :minDate="startTimeValue" @close="timeShow=false">
		</u-datetime-picker>
		<u-datetime-picker :show="endTimeShow" v-model="endTimeValue" :minDate="startTimeValue" mode="datetime"
			closeOnClickOverlay @close="endTimeShow=false" @confirm="endTimeConfirm" @cancel="endTimeClose">
		</u-datetime-picker>
		<u-popup :show="showInviteList" :round="20" mode="bottom" @close="showInviteList=false">
			<view class="dlgWp">
				<view class="moreListWp">
					<checkbox-group placement="column" @change="chooseInvite">
						<view class="moreItem" v-for="(item,index) in friendList" :key="index">
							<view class="left">
								<img v-if="item.head" :src="item.head" alt="" class='leftImgWp'>
								<img v-else
									src="https://file.casugn.com/storecompcard/temp/avatar_1682582523631.png" alt=""
									class='leftImgWp'>
							</view>
							<view class="right">
								<view>
									<text class="name"> {{item.name?item.name:''}}</text>
								</view>
								<view class="company">
									{{item.company?item.company:''}}
								</view>
							</view>
							<view class="chooseWp">
								<checkbox :value="JSON.stringify(item)" :checked="item.isChoose" />
							</view>
						</view>
					</checkbox-group>
				</view>
			</view>
		</u-popup>
		<ksp-cropper mode="fixed" :width="686" :height="320" :maxWidth="1024" :maxHeight="1024" :url="cropperUrl"
			@cancel="cropperUrl=''" @ok="cropperOk"></ksp-cropper>
	</view>
</template>

<script>
	import myEditor from '@/components/my-editor/my-editor'
	const chooseLocation = requirePlugin('chooseLocation');

	import {
		mapGetters
	} from 'vuex'
	import baseConfig from '@/config/baseUrl.js'
	export default {
		components: {
			myEditor
		},
		data() {
			return {
				uploadUrl: baseConfig.uploadUrl + '/sys/common/upload',
				region: [],
				areaShow: true, //省市显示
				title: '', //标题
				address: '', //地址
				content: '', //内容

				addressArea: '', //省市区
				province: '', //省
				city: '', //市
				district: '', //区
				startTime: "",
				endTime: '',
				member: '',
				// 活动信息列表
				activeList: [

				],

				// 开始时间事件显示隐藏
				timeShow: false,
				startTimeValue: Number(new Date()),
				// 结束时间
				endTimeShow: false,
				submitLoad: false,
				endTimeValue: Number(new Date()),
				seletInfoArr: [],
				switchValue: false, //是否通知邀请人员
				inviteList: [], //邀请人员列表
				showInviteList: false, // 显示邀请人员列表
				friendList: [], //好友列表
				registerList: [], //报名列表
				editId: '', //编辑id
				pageNo: 1,
				pageSize: 10,
				infoId: '',
				coord: '',
				cropperPic: '',
				cropperUrl: ''

			}
		},
		computed: {
			regionName() {
				// 转为字符串
				return this.region.map(item => item.name).join(' ')
			},
			...mapGetters(['userInfo']),
		},
		onLoad(option) {
			console.log(option)
			if (option.seletArr) {
				this.seletInfoArr = JSON.parse(option.seletArr)
				console.log(this.seletInfoArr)
			} else {
				this.seletInfoArr = []
			}
			if (option.id) {
				this.queryListById(option.id)
				this.infoId = option.id
			}
			if (option.dataInfo) {
				// this.infoId = uni.getStorageSync('circleId')
				let dataInfo = JSON.parse(option.dataInfo) || {}
				this.title = dataInfo.title
				this.address = dataInfo.address
				this.startTime = dataInfo.startTime
				this.endTime = dataInfo.endTime
				this.cropperPic = dataInfo.image
				this.province = dataInfo.province
				this.city = dataInfo.city
				this.district = dataInfo.district
				this.addressArea = this.province + this.city + this.district
				this.editId = dataInfo.id
				this.getIsSignLists()
				uni.setNavigationBarTitle({
					title: '编辑活动'
				})
			} else {
				this.title = ''
				this.address = ''
				this.startTime = ''
				this.endTime = ''
				this.cropperPic = ''
				this.province = ''
				this.city = ''
				this.district = ''
				this.coord = ''
			}
		},
		onShow() {
			//地图插件选点
			const location = chooseLocation.getLocation();
			if (location != null) {
				// console.log('获取地址信息', location);
				this.address = location.name ? location.name : location.address
				this.coord = JSON.stringify(location)
			}
			let content = uni.getStorageSync('activeContent')
			if (content && content.length > 0) {
				this.content = content
			}
		},
		onUnload() {
			chooseLocation.setLocation(null);
		},
		methods: {
			gotoEditor() {
				uni.$u.route('/pagesBusiness/activeList/editorPage');
			},

			queryListById(id) {
				this.$api.getCircleInfoListById(id).then(res => {
					if (res.success) {
						console.log(res.result, '根据id查询活动详情');
						this.content = res.result.content
						this.coord = res.result.coord
						uni.setStorageSync('activeContent', this.content)
					}
				})
			},
			bindTextAreaBlur(e) {
				if (!e.detail.value) {
					return
				}
				this.content = e.detail.value
			},
			getLocation() {
				const key = baseConfig.mapData.mapKey; //使用在腾讯位置服务申请的key
				const referer = baseConfig.mapData.appName //调用插件的app的名称
				const location = this.coord ? this.coord : ''

				wx.navigateTo({
					url: `plugin://chooseLocation/index?key=${key}&referer=${referer}&location=${location}`
				});
			},
			//底部拉取人员
			scrolltolower() {
				this.getIsSignLists('1')
			},
			// 获取已报名名单
			getIsSignLists(more) {

				this.pageNo = more ? ++this.pageNo : 1
				let data = {
					activityId: this.infoId,
					pageNo: this.pageNo,
					pageSize: this.pageSize,
				}
				this.$api.getSignTableLists(data).then(res => {
					if (res.success) {
						this.registerList = this.pageNo == 1 ? res.result.records : this.signLists.concat(res
							.result.records)
						this.pageNo = res.result.current
						this.pageSize = res.result.size
					}
				})
			},
			// 获取选择的地区
			handleGetRegion(region) {
				console.log(region)
				this.region = region
				this.addressArea = ''
				this.province = region[0].name //省
				this.city = region[1].name //市
				this.district = region[2].name //区
				this.addressArea = this.province + this.city + this.district
			},
			choosePicImg(e) {
				uni.chooseMedia({
					count: 1,
					mediaType: ['image'],
					success: (rst) => {
						// 设置url的值，显示控件
						console.log(rst, 'rst');
						this.cropperUrl = rst.tempFiles[0].tempFilePath;
					}
				});
			},
			areaConfirm(e) {
				console.log(e)
			},
			toAttendPerson() {
				uni.navigateTo({
					url: '/pagesBusiness/circleList/attendPerson'
				})
			},
			// 时间戳转yy-mm-dd hh-mm-ss
			shijianc(time) {
				var date = new Date(time)
				console.log("测试" + date)
				var Y = date.getFullYear() + '-'
				var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
				var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
				var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
				var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes())
				// + ':'
				var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds())
				return Y + M + D + h + m
			},
			// 开始时间选择
			startClick() {
				this.startTimeValue = Number(new Date().getTime())
				this.timeShow = true
			},
			// 开始时间时间确认
			startTimeConfirm(val) {
				let a = this.shijianc(val.value)
				this.startTime = a
				this.timeShow = false
				console.log(a)
			},
			// 开始时间取消选择
			startTimeClose() {
				this.timeShow = false
			},

			// 结束时间选择
			endClick() {
				this.endTimeValue = Number(new Date().getTime())
				this.endTimeShow = true
			},
			// 结束时间时间确认
			endTimeConfirm(val) {
				let a = this.shijianc(val.value)
				this.endTime = a
				this.endTimeShow = false
			},
			// 结束时间取消选择
			endTimeClose() {
				this.endTimeShow = false
			},
			async toInviteLists() {
				let payload = {
					openId: this.userInfo.openId,
					isDel: 0
				}
				let res = await this.$api.queryCardByCondition(payload) //获取好友列表
				if (res.success && res.result.length > 0) {
					let arr = res.result.map(item => {
						item.isChoose = false
						return item
					})
					this.friendList = [...new Set(arr)]
					this.showInviteList = true
				} else {
					this.friendList = []
				}
				//显示参会人员列表

			},
			chooseInvite({
				detail
			}) {

				console.log(detail.value, 'detail');
				this.inviteList = detail.value.map(item => {
					let newItem = JSON.parse(item)
					return newItem
				})
				console.log(this.inviteList, 'this.inviteList');
			},
			// 通知邀请人员改变
			switchChange(val) {
				console.log(val)
				this.switchValue = val
			},
			async cropperOk(ev) {
				this.cropperUrl = "";
				//上传
				this.cropperPic = await this.uploadFilePromise(ev.path)
				console.log(this.cropperPic, '裁剪-上传后路径');
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: baseConfig.uploadUrl + '/casugn-system/sys/common/upload',
						filePath: url,
						name: 'file',
						success: (res) => {
							let data = JSON.parse(res.data)
							if (data.success) {
								resolve(data.message)
							}
						}
					});
				})
			},
			// 提交活动
			async submitActive() {

				if (this.title == "") {
					uni.showToast({
						title: "标题不能为空",
						icon: 'none'
					});
					return false
				}
				if (this.address == "") {
					uni.showToast({
						title: "详细地址不能为空",
						icon: 'none'
					});
					return false
				}
				if (this.startTime == "请选择开始时间") {
					uni.showToast({
						title: "请选择开始时间",
						icon: 'none'
					});
					return false
				}
				if (this.endTime == "请选择结束时间") {
					uni.showToast({
						title: "请选择结束时间",
						icon: 'none'
					});
					return false
				}
				if (!this.cropperPic) {
					uni.showToast({
						title: "请选择封面照片",
						icon: 'none'
					});
					return false
				}
				if (!this.content) {
					uni.showToast({
						title: "请输入活动内容",
						icon: 'none'
					});
					return false
				}
				// if (this.addressArea == "") {
				// 	uni.showToast({
				// 		title: "请选择地址",
				// 		icon: 'none'
				// 	});
				// 	return false
				// }

				let list = this.inviteList.map(item => {
					return item.friendOpenId
				})
				let data = {
					qzActivity: {
						cardId: this.userInfo.id,
						openId: this.userInfo.openId,
						title: this.title,
						address: this.address,
						startTime: this.startTime,
						endTime: this.endTime,
						image: this.cropperPic,
						content: this.content,
						province: this.province,
						city: this.city,
						district: this.district,
						sourceType: 1,
						icon: this.userInfo.head,
						name: this.userInfo.name,
						sysOrgCode: this.userInfo.position,
						coord: this.coord
					},
					list,
					notiFy: this.switchValue
				}
				if (this.editId) data.qzActivity.id = this.editId
				let method = this.editId ? 'editActive' : 'releaseNewActive'
				if (this.submitLoad === true) return
				this.submitLoad = true
				this.$api[method](data).then(res => {
					if (res.success) {
						this.$showToast(this.editId ? '编辑成功' : '发布成功')
						uni.setStorageSync('activeContent', '') //清空内容缓存
						setTimeout(() => {
							this.submitLoad = false
							uni.navigateBack()
						}, 800)

					} else {
						this.submitLoad = false
						this.$showToast(res.message)
					}

				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep {
		.uicon-checkmark {
			font-size: 13px !important;
			top: -4px !important;
		}

		.u-upload__deletable__icon {
			.uicon-close {
				font-size: 11px !important;
				top: 3px !important;
			}
		}
	}

	.active-list-wp {
		box-sizing: border-box;
		padding-bottom: env(safe-area-inset-bottom);
		padding-bottom: constant(safe-area-inset-bottom);

		.submit-box {
			z-index: 20;
			position: fixed;
			bottom: constant(safe-area-inset-bottom);
			bottom: env(safe-area-inset-bottom);
			width: 100%;
			padding: 16rpx 48rpx;
			box-sizing: border-box;
			left: 0;
		}

		.submit-botton {
			z-index: 20;
			position: fixed;
			bottom: 0;
			width: 100%;
			padding: 16rpx 48rpx;
			box-sizing: border-box;
			left: 0;
			background: #fff;
			height: calc(120rpx + env(safe-area-inset-bottom));
		}

		.active-list {
			margin: 0rpx 32rpx;
			background: #FFFFFF;
			padding-bottom: calc(150rpx + env(safe-area-inset-bottom));
			padding-bottom: calc(150rpx + constant(safe-area-inset-bottom));

			.active-status {
				position: absolute;
				width: 140upx;
				height: 130upx;
				top: 38upx;
				right: 29upx;

				img {
					width: 140upx;
					height: 130upx;
				}
			}

			// 封面图
			.img-box {
				height: 320rpx;
				background: #F7F8FA;
				margin: 0 auto;
				margin-top: 32rpx;
				position: relative;

				.img-top {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					text-align: center;

					img {
						display: block;
						width: 48rpx;
						height: 48rpx;
						margin: 0 auto;
						margin-top: 106rpx;
					}

					text {
						margin-top: 16rpx;
						font-size: 32rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #86909C;
						line-height: 45rpx;
					}
				}
			}

			.active-head {
				padding: 37upx 0;
				display: flex;
				border-bottom: 1upx solid #EEEEEE;
				letter-spacing: 3upx;

				.head-img {
					width: 72upx;
					height: 72upx;
					border-radius: 50%;

					img {
						width: 72upx;
						height: 72upx;
						margin-top: 1upx;
					}
				}

				.active-name-info {
					margin-left: 21upx;

					.active-name {
						font-size: 30upx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #000000;
					}

					.active-introduce {
						margin-top: 19upx;
						font-size: 24upx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #999999;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						width: 400upx;
					}
				}
			}

			.sign-number-list {
				margin-top: 24rpx;
				background: #FFFFFF;
				margin-bottom: 60rpx;

				.sign-title {
					font-size: 28rpx;
					font-weight: 500;
					color: #1D2129;
					line-height: 39rpx;
				}

				.sign-item {
					width: 686rpx;
					height: 98rpx;
					opacity: 1;
					border-bottom: 1rpx solid #E5E6EB;
					display: flex;
					align-items: center;
					justify-content: flex-start;
					line-height: 98rpx;
					font-size: 24rpx;

					.sign-item-phone {
						margin-left: 80rpx;
					}

					.sign-item-name {
						width: 150rpx;
					}
				}
			}

			.active-title-cus {
				letter-spacing: 3upx;
				border-bottom: 1upx solid #EEEEEE;
				overflow: auto;
				position: relative;

				.title-top {
					font-size: 26rpx;
					font-weight: 400;
					color: #1D2129;
					line-height: 36rpx;
					margin-top: 32rpx;
					margin-bottom: 16rpx;
				}

				.contain-content {
					min-height: 400rpx;
					margin-top: 16rpx;
				}
			}

			.active-title {
				letter-spacing: 3upx;
				height: 160upx;
				border-bottom: 1upx solid #EEEEEE;
				// background: #ccc;
				overflow: hidden;
				position: relative;

				.title-top {
					font-size: 26rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #1D2129;
					line-height: 36rpx;
					margin-top: 32rpx;
					margin-bottom: 16rpx;
				}

				.active-invite-img {
					width: 50upx;
					height: 50upx;
					vertical-align: middle;

					img {
						width: 50upx;
						height: 50upx;
						vertical-align: middle;
					}
				}

				.ava-box {
					position: absolute;
					right: 0;
					top: 50rpx;
					margin-top: 25upx;
					display: flex;
					// .ava-item{
					// 	position: relative;
					// 	top: 20upx;
					// }
				}

			}



			.active-time {

				.start-time,
				.end-time {
					font-size: 24upx;
					color: #000000;
				}
			}

			.active-content {
				display: flex;
				// line-height: 48upx;
				letter-spacing: 3upx;
				// margin-top: 30upx;
				font-size: 30upx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #666666;
				// height: 110upx;
				line-height: 50upx;
				padding: 37upx 0;
				border-bottom: 1upx solid #EEEEEE;

				::v-deep .u-textarea {
					padding: 5upx !important;
				}

				.active-text {
					color: #000000;
				}
			}

			.active-info {
				border-bottom: 1upx solid #EEEEEE;
				padding: 37upx 0;

				.active-info-img {
					margin: 0 auto;
					margin-top: 30upx;
					width: 690upx;
					height: 350upx;
					border-radius: 30upx;
					position: relative;
					overflow: hidden;

					// border-bottom: 1upx solid #EEEEEE;
					img {
						width: 690upx;
						height: 350upx;
					}

					.active-info-mask {
						position: absolute;
						width: 690upx;
						height: 70upx;
						bottom: 0;
						background: linear-gradient(0deg, #000000 0%, rgba(0, 0, 0, 0.1000) 100%);
						line-height: 70upx;
						font-size: 24upx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						text-align: center;
					}
				}
			}

			.active-switch {
				display: flex;
				border-bottom: 1upx solid #EEEEEE;
				padding: 37upx 0;

				.switch-box {
					display: flex;

					.switch-text1 {
						margin-right: 10upx;
					}

					.switch-text2 {
						color: #413BF3;
						margin-left: 10upx;
					}

					.switch-item {
						margin: 0 10upx;
					}
				}
			}

			.active-select-address {
				display: flex;
				// justify-content: space-between;
				height: 110upx;
				line-height: 110upx;
				align-items: center;
				position: relative;

				.address-pick {

					width: 570upx;
					font-size: 24upx;

					text {
						margin-left: 8upx;
					}
				}

				.active-select-icon {
					position: absolute;
					top: 50%;
					transform: translateY(-12upx);
					right: 10upx;
					width: 30upx;
					height: 30upx;
				}
			}

			.active-address {
				height: 110upx;
				line-height: 110upx;
				border-bottom: 1upx solid #EEEEEE;
				// margin-top: 30upx;
				letter-spacing: 3upx;
				display: flex;
				justify-content: space-between;
				align-items: flex-end;

				.active-title {
					border-bottom: none;

					.active-text {
						color: #413BF3;
					}

				}


			}

			.avatar {
				padding: 37upx;
				flex: 1;
				display: flex;
				justify-content: space-between;
				border-bottom: 1upx solid #EEEEEE;

				.avatar-img {
					img {
						width: 60upx;
						height: 60upx;
						margin: 0 -15upx;
					}
				}

				.avatar-num {
					font-size: 24upx;
					font-family: PingFang SC;
					line-height: 60upx;
					font-weight: 400;
					color: #413BF3;

					.avatar-num-right {
						margin-right: 10upx;
					}

				}

			}
		}

	}

	//弹窗样式
	.dlgWp {
		width: 90%;
		margin: 30rpx auto;
		padding-bottom: 40rpx;
		height: 40vh;
		overflow: auto;

		.title {
			text-align: center;
			color: #333333;
		}


		.moreListWp {
			height: 100%;
			padding-top: 30upx;

			.moreItem {
				display: flex;
				margin: 30upx 0;
				padding-bottom: 15upx;
				border-bottom: 1upx solid #eee;

				.left {
					padding-right: 30upx;

					.leftImgWp {
						width: 80upx;
						height: 80upx;
					}
				}

				.right {
					flex: 1;

					.name {
						width: 91upx;
						height: 29px;
						font-size: 30upx;
						font-weight: 500;
						color: #000000;
						line-height: 36upx;
					}

					.title {
						padding-left: 22upx;
						font-size: 18upx;
						font-weight: 400;
						color: #666666;
						line-height: 36upx;
					}

					.company {
						padding-top: 12upx;
						font-size: 24upx;
						font-weight: 400;
						color: #333333;
						line-height: 36upx;
					}
				}

				.chooseWp {
					margin-left: 20rpx;
				}
			}


		}
	}
</style>
